<template>
  <div>
    <el-dialog title="新增货主合同" :visible.sync="dialogFormVisible">
      ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
      <el-form ref="form" :model="form" label-width="80px">
        <tr>
          <td>
            <el-form-item label="合同标题:">
              {{form.biaoTi}}
            </el-form-item>
          </td>
          <td>
            <el-form-item label="货主单位:">
              {{form.waiXieDanWei}}
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="货主负责人:">
              {{form.ren}}
            </el-form-item>
          </td>
          <td>
            <el-form-item label="线 路:">
              <el-select v-model="form.xianLu" placeholder="请选择线路" clearable>
                <el-option v-for="item in www" :key="item.id" :label="item.lineTable1" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="吨 运 价:">
              {{form.yunJia}}
            </el-form-item>
          </td>
          <td>
            <el-form-item label="包车条件吨位:">
              {{form.dunWei}}
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="包车金额:">
              {{form.jInE}}
            </el-form-item>
          </td>
          <td>
            <el-form-item label="经办人:">
              {{form.jinBanRen}}
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="签订时间:">
              <el-col :span="11">

                {{Rud(form.qianDinDate)}}
              </el-col>
            </el-form-item>
          </td>
          <td>
            <el-form-item label="合同金额:">
              {{form.heTongJinE}}
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="合同标的或项目说明:">
              {{form.heTongBiao}}
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="合同主要条款/变更条款:">
              {{form.tiaoKuan}}
            </el-form-item>
          </td>
        </tr>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="合同标题">
          <el-input v-model="formInline.biaoTi" placeholder="请输入合同标题"></el-input>
        </el-form-item>
        <el-form-item label="外协单位">
          <el-input v-model="formInline.waiXieDanWei" placeholder="请输入外协单位"></el-input>
        </el-form-item>
        <el-form-item label="外协负责人">
          <el-input v-model="formInline.ren" placeholder="请输入外协负责人"></el-input>
        </el-form-item>
        <el-form-item label="经办人">
          <el-input v-model="formInline.jinBanRen" placeholder="请输入经办人"></el-input>
        </el-form-item>
        <el-form-item label="签订时间">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="formInline.qianDinDate" style="width: 100%;">
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="Sel">查询</el-button>
          <el-button type="primary" @click="PiDel">批量删除</el-button>
          <el-button type="primary" @click="HuoAdd">新增承运合同</el-button>
          <el-button icon="el-icon-thumb" @click="Reset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>>
        <el-table-column label="合同编号" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.numBer }}</span>
          </template>
        </el-table-column>
        <el-table-column label="合同标题" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.biaoTi }}</span>
          </template>
        </el-table-column>
        <el-table-column label="外协单位" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.waiXieDanWei }}</span>
          </template>
        </el-table-column>
        <el-table-column label="外协负责人" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.ren }}</span>
          </template>
        </el-table-column>
        <el-table-column label="线路" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.xiName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="吨运价  " width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.yunJia }}</span>
          </template>
        </el-table-column>
        <el-table-column label="包车条件吨位" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.dunWei }}</span>
          </template>
        </el-table-column>
        <el-table-column label="包车金额" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.jInE }}</span>
          </template>
        </el-table-column>
        <el-table-column label="签订日期" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ Rud(scope.row.qianDinDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="经办人" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.jinBanRen }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ Rud(scope.row.createDate)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="180">
          <template slot-scope="scope">
             <span style="margin-left: 10px" v-if="scope.row.sistrte==0">待提交</span>
            <span style="margin-left: 10px" v-if="scope.row.sistrte==1">待审批</span>
            <span style="margin-left: 10px" v-if="scope.row.sistrte==2">已通过</span>
            <span style="margin-left: 10px" v-if="scope.row.sistrte==3">已拒绝</span>
          </template>
        </el-table-column>
        <el-table-column label="审批人" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.shengHeRen}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="Fan(scope.row.id)">编辑</el-button>
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">查看</el-button>
              <el-button size="mini" @click="Sheng(scope.row.id)">提交审批</el-button>
            <el-button size="mini" type="danger" @click="Delete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageIndex"
        :page-sizes="[1, 3, 5, 7]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      dialogFormVisible: false,
      form: {
        biaoTi: '',
        waiXieDanWei: '',
        ren: '',
        xianLu: '',
        yunJia: '',
        dunWei: '',
        jInE: '',
        jinBanRen: '',
        qianDinDate: '',
        heTongJinE: '',
        heTongBiao: '',
        tiaoKuan: '',
      },
      formLabelWidth: '120px',
      formInline: {
        biaoTi: '',
        dunWei: '',
        ren: '',
        jinBanRen: '',
        qianDinDate: '',
      },
      www: [],
      tableData: [],
      pageIndex: 1,
      pageSize: 3,
      total: 0,
      multipleSelection: []
    }
  },
  created () {
    this.Sel();
    this.BingXian();
  },
  methods: {
         Sheng (id) {
      this.$http({
        url: "https://localhost:44357/api/Car/CarSite",
        method: "put",
        params: {
          id: id
        }
      }).then((r) => {
        if (r.data>0) {
          this.$message({
            message: '恭喜你,修改状态成功！',
            type: 'warning'
          });
          this.Sel();
        }
      })
    },
    HuoAdd () {
      this.$router.push("/CarAdd")
    },
    BingXian () {
      this.$http({
        url: "https://localhost:44357/api/Own/Bing",
        method: "get",
      }).then((r) => {
        this.www = r.data;
      })
    },
    PiDel () {
      var ids = []
      for (let i = 0; i < this.multipleSelection.length; i++) {
        ids.push(this.multipleSelection[i].id)
      }
      if (ids.length <= 0) {
        this.$message({
          message: '请选择一条数据',
          type: 'warning',
        });
        return
      }
      if (confirm("确定批量删除吗？")) {
        this.$http({
          url: "https://localhost:44357/api/Car/PiDel?ids=" + ids.toString(),
          method: "delete",
        }).then((r) => {
          if (r.data > 0) {
            this.$message({
              message: '警告哦,删除成功！',
              type: 'warning'
            });
            this.Sel();
          }
        })
      }
    },
    Rud (val) {
      var date = new Date(val)
      return date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDay() + "日";
    },
    Reset () {
      this.$router.go(0);
    },
    Delete (id) {
      if (confirm("确定要删除嘛")) {
        this.$http({
          url: "https://localhost:44357/api/Car/Delete",
          method: "delete",
          params: {
            id: id,
          },
        }).then((res) => {
          if ((res.data = 200)) {
            this.$message.error('恭喜你，删除货物成功！');
            this.Sel();
          }
        });
      }
    },
    Sel () {
      this.$http({
        url: "https://localhost:44357/api/Car/CarSel",
        method: 'get',
        params: {
          biaoTi: this.formInline.biaoTi,
          waiXieDanWei: this.formInline.waiXieDanWei,
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
          ren: this.formInline.ren,
          jinBanRen: this.formInline.jinBanRen,
          qianDinDate: this.formInline.qianDinDate,
        }
      }).then((r) => {
        this.tableData = r.data.data;
        this.total = r.data.total
      })
    },
    handleSizeChange (val) {
      this.pageSize = val;
      this.Sel();
    },
    handleCurrentChange (val) {
      this.pageIndex = val;
      this.Sel();
    },
    Fan (row) {
      document.cookie = row;
      localStorage.setItem("kqxq", row);
      this.$router.push("/CarUpdate");
    },
    handleEdit (index, row) {
      this.dialogFormVisible = true;
      this.form = row;
      console.log(index, row);
    },
    handleDelete (index, row) {
      console.log(index, row);
    },
    handleSelectionChange (val) {
      this.multipleSelection = val;

    }
  }
}
</script>
